<template>
  <div class="user-interactions">
    <!-- 页面标题 -->
    <div class="page-header">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/user/profile' }">
          个人中心
        </el-breadcrumb-item>
        <el-breadcrumb-item>我的互动</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主要内容 -->
    <div class="interactions-content">
      <!-- 标签页导航 -->
      <el-tabs
        v-model="activeTab"
        class="interactions-tabs"
        @tab-change="handleTabChange"
      >
        <el-tab-pane label="点赞文章" name="liked">
          <template #label>
            <span class="tab-label">
              <IconifyIconOnline icon="ep:heart-filled" />
              点赞文章
            </span>
          </template>
        </el-tab-pane>

        <el-tab-pane label="收藏文章" name="collected">
          <template #label>
            <span class="tab-label">
              <IconifyIconOnline icon="ep:star-filled" />
              收藏文章
            </span>
          </template>
        </el-tab-pane>

        <el-tab-pane label="我的关注" name="following">
          <template #label>
            <span class="tab-label">
              <IconifyIconOnline icon="ep:user-filled" />
              我的关注
            </span>
          </template>
        </el-tab-pane>

        <el-tab-pane label="我的粉丝" name="followers">
          <template #label>
            <span class="tab-label">
              <IconifyIconOnline icon="ep:avatar" />
              我的粉丝
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>

      <!-- 标签页内容 -->
      <div class="tab-content">
        <!-- 点赞文章 -->
        <div v-show="activeTab === 'liked'">
          <LikedArticlesList
            :user-id="userId"
            :is-current-user="isCurrentUser"
          />
        </div>

        <!-- 收藏文章 -->
        <div v-show="activeTab === 'collected'">
          <CollectedArticlesList
            :user-id="userId"
            :is-current-user="isCurrentUser"
          />
        </div>

        <!-- 关注用户 -->
        <div v-show="activeTab === 'following'">
          <UserFollowingList :user-id="userId" />
        </div>

        <!-- 粉丝用户 -->
        <div v-show="activeTab === 'followers'">
          <UserFollowersList :user-id="userId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { IconifyIconOnline } from "@/components/ReIcon";
import LikedArticlesList from "./components/LikedArticlesList.vue";
import CollectedArticlesList from "./components/CollectedArticlesList.vue";
import UserFollowingList from "./components/UserFollowingList.vue";
import UserFollowersList from "./components/UserFollowersList.vue";
import { useUserAuthStore } from "@/store/modules/userAuth";

// 路由相关
const route = useRoute();
const router = useRouter();
const userAuthStore = useUserAuthStore();

// 响应式数据
const activeTab = ref("liked");

// 计算当前用户ID
const userId = computed(() => {
  if (route.params.userId) {
    return Number(route.params.userId);
  }
  return userAuthStore.userId;
});

// 是否为当前用户
const isCurrentUser = computed(() => {
  return userId.value === userAuthStore.userId;
});

// 方法
const handleTabChange = (tabName: string) => {
  activeTab.value = tabName;
  // 可以在这里添加路由参数来保持标签页状态
  router.replace({
    ...route,
    query: { ...route.query, tab: tabName }
  });
};

// 生命周期
onMounted(() => {
  console.log(`🎆 interactions.vue 组件已挂载`);
  console.log(`🎆 当前用户ID:`, userId.value);

  // 从路由查询参数恢复标签页状态
  if (route.query.tab) {
    activeTab.value = route.query.tab as string;
    console.log(`🎆 恢复标签页状态:`, activeTab.value);
  }
});
</script>

<style scoped lang="scss">
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式优化
@media (width <= 768px) {
  .user-interactions {
    .interactions-content {
      .interactions-tabs {
        :deep(.el-tabs__nav-scroll) {
          padding: 0;
        }

        :deep(.el-tabs__item) {
          padding: 0 12px;
          font-size: 13px;

          .tab-label {
            gap: 4px;
            font-size: 13px;

            .iconify {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

.user-interactions {
  max-width: 1200px;
  padding: 20px;
  margin: 0 auto;

  @media (width <= 768px) {
    padding: 16px;
  }

  .page-header {
    margin-bottom: 24px;

    :deep(.el-breadcrumb) {
      font-size: 14px;
    }
  }

  .loading-container {
    padding: 40px;
  }

  .interactions-content {
    .interactions-tabs {
      margin-bottom: 24px;

      :deep(.el-tabs__header) {
        margin-bottom: 20px;
      }

      :deep(.el-tabs__nav-wrap) {
        padding: 0 4px;
      }

      .tab-label {
        display: flex;
        gap: 6px;
        align-items: center;
        font-size: 14px;

        .iconify {
          font-size: 16px;
        }

        .tab-badge {
          :deep(.el-badge__content) {
            height: 16px;
            padding: 0 4px;
            font-size: 10px;
            line-height: 16px;
          }
        }
      }
    }

    .tab-content {
      min-height: 400px;

      .articles-list {
        .empty-state {
          padding: 60px 20px;
          text-align: center;
        }
      }

      .users-list {
        .empty-state {
          padding: 60px 20px;
          text-align: center;
        }

        .user-cards {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 16px;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}

// 标签页动画
.tab-content > div {
  animation: fade-in 0.3s ease-in-out;
}

// 加载状态优化
.loading-container {
  :deep(.el-skeleton__item) {
    background: linear-gradient(
      90deg,
      var(--el-skeleton-color) 25%,
      var(--el-skeleton-to-color) 37%,
      var(--el-skeleton-color) 63%
    );
    background-size: 400% 100%;
    animation: el-skeleton-loading 1.4s ease infinite;
  }
}

// 空状态优化
.empty-state {
  :deep(.el-empty) {
    .el-empty__image {
      width: 120px;
      height: 120px;
    }

    .el-empty__description {
      margin: 16px 0 20px;
      color: var(--el-text-color-secondary);
    }
  }
}
</style>
